<style lang="scss" scoped>
.item {
  padding: 8px 16px;
  cursor: pointer;
}
</style>

<template>
  <template>
    <!-- tab图层 -->
    <LayerTab
      v-if="tabLayerVisible.length"
      :layerVisible="tabLayerVisible"
      :layerParams="tabLayerParams"
    />
    <!-- 雷达圈 -->
    <LayerRadar v-if="radarVisible" v-bind="radarParams" @close="closeRadar" />
  </template>
</template>

<script setup lang="ts">
import * as Cesium from 'cesium'
import { defineProps, provide, ref } from 'vue'
import LayerRadar from './components/LayerRadar.vue'
import LayerTab from './components/LayerTab.vue'
import { BillboardManager } from './utils'
import type { DataTypeKey, IconMap, RequestParams } from './types'

const { viewer } = defineProps<{
  viewer: Cesium.Viewer
}>()
const iconMap = ref<IconMap>()
const billboardManager = new BillboardManager(viewer)
const radarVisible = ref(false)
const tabLayerVisible = ref<DataTypeKey[]>([])
const tabLayerVisibleBackup = ref<DataTypeKey[]>([])

const tabLayerParams = ref<Record<DataTypeKey, RequestParams>>({
  risk: {},
  device: {},
  event: {},
})
const radarParams = ref<{
  lat: number
  lng: number
}>({
  lat: 29.559,
  lng: 106.57,
})

provide('viewer', viewer)
provide('iconMap', iconMap)
provide('billboardManager', billboardManager)
provide('iconMap', iconMap)

/**
 * 关闭雷达圈
 */
const closeRadar = () => {
  radarVisible.value = false
  tabLayerVisible.value = [...tabLayerVisibleBackup.value]
}

/**
 * 打开雷达圈并重置所有图层
 * @param lng 经度
 * @param lat 纬度
 */
const openRadar = (lng: number, lat: number) => {
  tabLayerVisibleBackup.value = [...tabLayerVisible.value]

  // 关闭所有tab图层
  tabLayerVisible.value = []
  Object.keys(tabLayerParams.value).forEach((key) => {
    tabLayerParams.value[key as DataTypeKey] = {}
  })

  // 打开雷达圈
  radarParams.value = {
    lat,
    lng,
  }
  radarVisible.value = true
}

console.log(openRadar)

/**
 * 更新图层参数
 * @param layer 图层类型或参数对象
 */
const updateLayerParams = (layer: Partial<Record<DataTypeKey, RequestParams>>) => {
  Object.entries(layer).forEach(([key, value]) => {
    tabLayerParams.value[key as DataTypeKey] = value
  })
}

/**
 * 控制图层显示
 * @param layers 要操作的图层数组或参数对象
 * @param options 配置选项
 */
const controlLayers = (
  layers: DataTypeKey | DataTypeKey[] | Partial<Record<DataTypeKey, RequestParams>>,
  options: {
    closeOthers?: boolean
    closeRadar?: boolean
    clearParamsOnClose?: boolean
  } = { closeOthers: true, closeRadar: true, clearParamsOnClose: true }
) => {
  const {
    closeOthers = true,

    closeRadar: shouldCloseRadar = true,
    clearParamsOnClose = true,
  } = options

  if (typeof layers !== 'string' && !Array.isArray(layers)) {
    updateLayerParams(layers)
  }

  // 获取要操作的图层数组
  const layersArray =
    typeof layers === 'string'
      ? [layers]
      : Array.isArray(layers)
        ? layers
        : (Object.keys(layers) as DataTypeKey[])

  // 清空被关闭图层的参数
  if (clearParamsOnClose && closeOthers) {
    Object.keys(tabLayerParams.value).forEach((key) => {
      if (!layersArray.includes(key as DataTypeKey)) {
        tabLayerParams.value[key as DataTypeKey] = {}
      }
    })
  }

  // 控制图层开关
  tabLayerVisible.value = closeOthers
    ? [...new Set(layersArray)]
    : [...new Set([...tabLayerVisible.value, ...layersArray])]

  // 打开tab图层时关闭雷达圈
  if (shouldCloseRadar && layersArray.length > 0 && radarVisible.value) {
    radarVisible.value = false
  }
}

controlLayers(
  {
    risk: {
      riskTypeName: '应急避难场所',
    },
  },
  { closeOthers: false }
)
// openRadar(106.48, 29.53)

// controlLayers('risk')
// console.log(controlLayers)

// openRadarAndResetLayers(107.09, 29.54)

// 添加 hover 事件
// useBillboardHover(billboardManager)
</script>
